<template>
  <div>
    <x-header :right-options="{showMore: true}" :left-options="{preventGoBack: true}" @on-click-back="back" @on-click-more="showMenus = true">我的理财</x-header>
    <div class="chart">
      <h1>{{financialData.profitMoney}}</h1>
      <em>总收益(元)</em>
      <span>数据最后更新；{{financialData.updateTime}}</span>
      <div class="centerArea">
        <div class="item">
          <strong>{{financialData.yesProfit}}</strong>
          <span>昨日收益(元)</span>
        </div>
        <div class="item">
          <strong>{{financialData.totalMoney}}元</strong>
          <span>总资产(元)</span>
        </div>
      </div>
    </div>
    <div class="detailInfo">
      <h2>收益明细</h2>
      <div class="detailMain" v-for="(item, index) in financialData.list" :key="index">
        <div class="box" @click="gotoNext(item)">
          <div class="hd">
            <h4>{{item.name}}</h4>
            <em v-show="item.surplusDay">剩余{{item.surplusDay}}天</em>
          </div>
          <div class="bd">
            <div class="cate">
              <div class="flex">
                <strong>{{item.holdShare}}</strong>
                <span>持有份额</span>
              </div>
              <div class="flex" v-if="item.expectedReturn">
                <strong>{{item.expectedReturn}}</strong>
                <span>预期收益率</span>
              </div>
              <div class="flex" v-if="!item.expectedReturn">
                <strong>{{item.yesMoney}}</strong>
                <span>昨日收益</span>
              </div>
              <div class="flex">
                <strong>{{item.holdMoney}}</strong>
                <span v-show="item.holdMoney">持有收益</span>
              </div>
            </div>
          </div>
          <div class="proStatus">
            <img v-if="item.proStatus === '1'" src="../../../assets/img/Financial/zunxiang.png">
            <img v-else-if="item.proStatus === '2'" src="../../../assets/img/Financial/jingwai.png">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  data () {
    return {
      financialData: {
        profitMoney: '', // 总收益
        updateTime: '', // 最后更新日期
        yesProfit: '', // 昨日收益
        totalMoney: '', // 总资产
        list: [{
          proId: '', // 产品ID
          name: '', // 产品名称
          surplusDay: '', // 剩余天数
          expectedReturn: '', // 预期收益率
          holdShare: '', // 持有份额
          yesMoney: '', // 昨日收益
          holdMoney: '', // 持有收益
          proStatus: '' // 1.尊享，2.境外理财...
        }, {
          proId: '', // 产品ID
          name: '', // 产品名称
          surplusDay: '', // 剩余天数
          expectedReturn: '', // 预期收益率
          holdShare: '', // 持有份额
          yesMoney: '', // 昨日收益
          holdMoney: '', // 持有收益
          proStatus: '' // 1.尊享，2.境外理财...
        }, {
          proId: '', // 产品ID
          name: '', // 产品名称
          surplusDay: '', // 剩余天数
          expectedReturn: '', // 预期收益率
          holdShare: '', // 持有份额
          yesMoney: '', // 昨日收益
          holdMoney: '', // 持有收益
          proStatus: '' // 1.尊享，2.境外理财...
        }]
      }
      // financialData: {
      //   profitMoney: '5,000.00', // 总收益
      //   updateTime: '2018/03/12 13:22:11', // 最后更新日期
      //   yesProfit: '10.00', // 昨日收益
      //   totalMoney: '100,000,0', // 总资产
      //   list: [{
      //     proId: '1010', // 产品ID
      //     name: '交盈添利', // 产品名称
      //     surplusDay: '16', // 剩余天数
      //     expectedReturn: '0.2%-8.0%', // 预期收益率
      //     holdShare: '14,000.00', // 持有份额
      //     yesMoney: '', // 昨日收益
      //     holdMoney: '', // 持有收益
      //     proStatus: '' // 1.尊享，2.境外理财...
      //   }, {
      //     proId: '1011', // 产品ID
      //     name: '交盈添利', // 产品名称
      //     surplusDay: '13', // 剩余天数
      //     expectedReturn: '', // 预期收益率
      //     holdShare: '14,000.00', // 持有份额
      //     yesMoney: '-10.00', // 昨日收益
      //     holdMoney: '+800.00', // 持有收益
      //     proStatus: '' // 1.尊享，2.境外理财...
      //   }, {
      //     proId: '1012', // 产品ID
      //     name: '东亚联丰环球债券', // 产品名称
      //     surplusDay: '', // 剩余天数
      //     expectedReturn: '', // 预期收益率
      //     holdShare: '14,000.00', // 持有份额
      //     yesMoney: '+200.00', // 昨日收益
      //     holdMoney: '+800.00', // 持有收益
      //     proStatus: '2' // 1.尊享，2.境外理财...
      //   }]
      // }
    }
  },
  created () {
    this.getFinancialData()
  },
  methods: {
    getFinancialData () {
      let _this = this
      window.WebViewJavascriptBridge.callHandler('nativeRequest',
        JSON.stringify({
          'requstSource': 'internetRequest',
          'url': 'http://whichat.icitic.net/mstep/mstep.do?act=business',
          'params': {'method_Name': 'myFinancialData', 'user_Data': {'clientId': '1010'}}
        }),
        function (response) {
          response = JSON.parse(response)
          if (response.status === 0 || response.status === '0') {
            _this.financialData = response.data.data[0]
          } else {
            console.log('fail')
          }
        })
    },
    gotoNext (item) {
      if (item.proId === '1012') {
        this.$router.push({name: 'FinancialOverseasTradeA'})
      } else {
        this.$router.push({name: 'FinancialOverseasTrade'})
      }
    },
    back () {
      this.$router.isBack = true
      this.$router ? this.$router.back() : window.history.back()
      // console.log(this.$router.isBack)
    }
  }

}
</script>

<style lang="less" scoped>
.chart {
  padding-top: .42rem;
  text-align: center;
  h1 {
    // todo 此处需要用到 PingFang-SC-Bold 字体
    font-size: .6rem;
    font-weight: bold;
    color: #f63;
  }
  em {
    display: block;
    font-size: .26rem;
  }
  span {
    display: block;
    font-size: .24rem;
    color: #999;
  }
}
.centerArea {
  display: flex;
  margin: 0 auto;
  padding: .25rem .5rem .25rem;
  width: calc(100% - 2.96rem);
  height: .45rem;
  background-color: #a57f19;
  border-radius: .5rem;
  color: #fff;
  line-height: 1.2;
  text-align: left;
  .item {
    flex: 1;
    padding-left: .1rem;
    border-left: 1px solid rgba(255,255,255,.5);
    strong {
      display: block;
      font-size: .26rem;
    }
    span {
      display: block;
      font-size: .2rem;
      color: rgba(255,255,255,.6);
    }
  }
}
.detailInfo {
  margin-top: .35rem;
  padding: 0 .3rem;
  background-color: #fff;
  h2 {
    font-size: .3rem;
    line-height: .8rem;
    border-bottom: 1px solid #eaeaea;
    font-weight: bold;
  }
  .detailMain {
    position: relative;
    padding: .16rem 0 0;
    .box {
      position: relative;
      padding-bottom: .4rem;
      border-bottom: 1px solid #eaeaea;
      .hd {
        padding: .2rem 0;
        overflow: hidden;
        h4 {
          float: left;
          margin-right: .14rem;
        }
        em {
          float: left;
          padding: 0 .18rem;
          font-size: .2rem;
          line-height: .32rem;
          color: #f63;
          border: 1px solid #f63;
          border-radius: .15rem;
        }
      }
      .bd {
        .cate {
          display: flex;
          .flex {
            flex: 1;
            strong {
              display: block;
              font-size: .34rem;
              font-weight: bold;
            }
            span {
              display: block;
              font-size:  .26rem;
              color: #666;
            }
          }
        }
      }
    }
    .proStatus {
      position: absolute;
      top: 0;
      right: 0;
      width: 1.27rem;
      height: 1.27rem;
      img {
        width: 100%;
      }
    }
  }
}
</style>
